<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{this.info.class}}({{this.info.username}})</span>
      </ul>
    </el-row>

    <div class="content">
      <div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          快开彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="(item,index) in replenishmentsGames[0]" @click="changeNowSelectedGame(item.value)" :key="index" :class="{'is-selected-button':nowSelectedGame === item.value}">
              {{item.label}}
            </button>
          </ul>
        </div>
        <div class="myTable">
          <ul class="myTable-title">
        <span>
          香港彩
        </span>
          </ul>
          <ul class="myTable-content">
            <button v-for="(item,index) in replenishmentsGames[1]" @click="changeNowSelectedGame(item.value)" :key="index" :class="{'is-selected-button':nowSelectedGame === item.value}">
              {{item.label}}
            </button>
          </ul>
        </div>
      </div>
    </div>

    <el-row class="baseOdd-content" v-if="nowGameReplenishments">
      <table class="top-table">
        <tbody>
        <tr>
          <td v-for="(list,index) in nowGameReplenishments" :key="index">
            <table class="gameOdds">
              <thead>
              <tr>
                <th>
                  种类
                </th>
                <th>
                  注额
                </th>
                <th>
                  状态
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index1) in list" :key="index1" class="gameOdds-info">
                <td>
                  {{item.replenishment_item_name}}
                </td>
                <td>
                  <input type="text" v-model="item.amount">
                </td>
                <td>
                  <label>
                   <input type="radio" v-model="item.is_open" value="1">启用
                  </label>
                  <label>
                    <input type="radio" v-model="item.is_open" value="0">停用
                  </label>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
    </el-row>

    <el-row class="baseOdd-footer">
      <span>快速设置:</span>
      <ul>注额:
        <input type="text" v-model="bottomText">
        <label>
          <input type="radio" v-model="bottomRadio" value="1">
          启用
        </label>
        <label>
          <input type="radio" v-model="bottomRadio" value="0">
          停用
        </label>
        <button @click="changeGames">
          确认
        </button>
      </ul>
    </el-row>

    <el-row class="baseOdd-bottom">
      <button @click="subBtn">确认</button>
      <button @click="cancelBtn">取消</button>
    </el-row>

    <el-dialog
      title="用户提示"
      :visible.sync="dialogVisible"
      width="30%">
      <ul class="myDialog">
        <li>
          <span>{{messTip}}</span>
        </li>
        <li>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'index',
    computed: {
      ...mapGetters(['info']),
    },
    methods: {
      // 切换彩种
      changeNowSelectedGame(value) {
        this.nowSelectedGame = value
        this.GetReplenishList()
      },
      // 快速设置
      changeGames() {
        for (const key in this.nowGameReplenishments) {
          for (const index in this.nowGameReplenishments[key]) {
            this.nowGameReplenishments[key][index].amount = this.bottomText
            this.nowGameReplenishments[key][index].is_open = this.bottomRadio
          }
        }
      },
      // 取消还原
      cancelBtn() {
        this.nowGameReplenishments = JSON.parse(JSON.stringify(this.beforeNowGameReplenishments))
      },
      // 提交修改
      subBtn() {
        const prames = {
          game: this.nowSelectedGame,
          params: [],
        }
        for (const key in this.nowGameReplenishments) {
          for (const index in this.nowGameReplenishments[key]) {
            let isChange = false
            for (const subIndex in this.nowGameReplenishments[key][index]) {
              if (this.nowGameReplenishments[key][index][subIndex] !== this.beforeNowGameReplenishments[key][index][subIndex]) {
                isChange = true
              }
            }
            if (isChange) {
              const tempPrames = {
                item_id: parseInt(this.nowGameReplenishments[key][index].item_id),
                amount: parseInt(this.nowGameReplenishments[key][index].amount),
                enabled: parseInt(this.nowGameReplenishments[key][index].is_open),
              }
              prames.params.push(tempPrames)
            }
          }
        }
        if (prames.params.length > 0) {
          if (window.confirm('你确定要提交修改吗？')) {
            this.$store.dispatch('SetReplenishList', prames)
              .then(response => {
                this.$message({
                  type: 'success',
                  message: response.message,
                })
                this.GetReplenishList()
              })
            return true
          } else {
            return false
          }
        } else {
          this.dialogVisible = true
          this.messTip = '未有数据变更！请修改后再提交！'
        }
      },
      // 获取自动补货设置
      GetReplenishList() {
        this.nowGameReplenishments = []
        const tempGame = []
        this.$store.dispatch('GetReplenishList', { game: this.nowSelectedGame })
          .then(response => {
            for (const key in response) {
              if (key !== 'message') {
                tempGame.push(response[key])
              }
            }
            const halfLength = parseInt(tempGame.length / 2)
            this.$set(this.nowGameReplenishments, 0, tempGame.slice(0, halfLength))
            this.$set(this.nowGameReplenishments, 1, tempGame.slice(halfLength))

            this.beforeNowGameReplenishments = JSON.parse(JSON.stringify(this.nowGameReplenishments))
          })
      },
      // 获取彩种导航
      GetReplenishmentsGames() {
        this.replenishmentsGames = []
        this.$store.dispatch('GetReplenishmentsGames')
          .then(response => {
            for (const key in response) {
              if (key !== 'message') {
                const tempNav = []
                for (const index in response[key]) {
                  const temp = {
                    label: response[key][index],
                    value: index,
                  }
                  tempNav.push(temp)
                }
                this.replenishmentsGames.push(tempNav)
              }
            }
            this.nowSelectedGame = this.replenishmentsGames[0][0].value
            this.GetReplenishList()
          })
      },
    },
    created() {
      this.GetReplenishmentsGames()
    },
    data() {
      return {
        replenishmentsGames: {
          '快开彩': [],
          '香港彩': [],
        }, // 自动补货彩种导航栏
        nowSelectedGame: '', // 当前选中的游戏
        nowGameReplenishments: [], // 当前游戏自动补货信息
        beforeNowGameReplenishments: [], // 当前游戏自动补货信息,修改前
        bottomText: '', // 快速设置注额
        bottomRadio: '0', // 快速设置单选框 启用或禁用
        dialogVisible: false, // 弹窗显示
        messTip: '', // 弹窗提示信息
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .myTable{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    height:auto;
    border: 1px solid #B9C2CB;
    border-bottom: 0;
  }
  .myTable:last-child{
    border-bottom: 1px solid #B9C2CB !important;
  }
  .myTable ul{
    min-width: 60px;
    text-align: center;
  }
  .myTable-title{
    float:left;
    box-shadow: inset 0px -14px 19px 2px #DAEFEF;
    height:30px;
    font-weight: bold;
    font-size:13px;
    line-height: 30px;
    position: absolute;
    display: block;
  }
  .myTable-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    border-bottom: 0;
    margin-left: 60px;
  }
  .myTable-content button{
    border:0;
    color:#535353;
    background-color: #DCDCDC;
    height:25px;
    min-width:100px;
    padding: 0 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-top: 5px;
    margin-right: 5px;
  }
  .myTable-content button:hover{
    background-color: #386BAD;
    color:#FFF;
  }
  .myTableSelectedBtn{
    background-color: #386BAD;
    color:#FFF;
  }
  .content{
    padding: 10px;
  }

  .baseOdd-content{
    width: 100%;
    padding: 10px;
  }

  .baseOdd-top{
    display: flex;
    height:28px;
    line-height: 28px;
    margin-top: 10px;
  }
  .baseOdd-top ul{
    margin-left: 10px;
  }
  .top-table{
    width: 100%
  }
  .top-table td{
    vertical-align: top;
  }
  .gameOdds{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .gameOdds th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .gameOdds td{
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
  }
  .gameOdds input[type='text']{
    width:60px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
  }
  .gameOdds-info{

  }
  .gameOdds-info:hover{
    background-color: #CAE8F6;
  }

  .baseOdd-footer{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size:13px;
    height:30px;
    line-height: 30px;
  }
  .baseOdd-footer ul{
    padding: 0 5px;
  }
  .baseOdd-footer ul input[type='text']{
    width:60px;
    display: inline-block;
  }
  .baseOdd-footer ul button{
    color: #fae7e9;
    border: solid 1px #cf7878;
    background: #da5867;
    background: -webkit-gradient(linear,left top,left bottom,from(#ca7886),to(#be5c6c));
    background: -moz-linear-gradient(top,#f16c7c,#bf404f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
    margin-right: 10px;
    height: 22px;
    width: 85px;
    line-height: 22px;
  }
  .baseOdd-footer ul button:hover{
    color:#fff100;
  }
  .baseOdd-footer .el-radio{
    margin: 0;
  }
  .baseOdd-bottom{
    text-align: center;
    margin-top: 20px;
  }
  .baseOdd-bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .baseOdd-bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .is-selected-button{
    background-color: #386BAD !important;
    color:#FFF !important;
  }

  .myDialog li{
    padding: 10px 0;
    overflow: hidden;
  }
  .myDialog button{
    float: right;
  }
</style>
